<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        margin: 20px;
      }

      .box_banner {
        border-radius: 15px;
        text-align: center;
        width: 100%;
        height: 30px;
        background-color: #ddd;
      }

      .banner {
        border-radius: 15px;
        text-align: center;
        width: 10%;
        background-color: blueviolet;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        margin: 20px 0;
      }
      /* .p_baifenbi {
            transition: 5s;
          } */
    </style>
  </head>

  <body>
    <h1>百分比进度条</h1>
    <div class="box_banner">
      <div class="banner">10%</div>
      <button>点我</button>
      <progress max="100" style="width: 100%" value="0" id="pg"></progress>
    </div>
    <script>
      //获取button元素
      var btn = document.querySelector("button");
      //获取进度条元素
      var banner = document.querySelector(".banner");

      //给进度条赋初始值，让进度条的初始进度为10%
      var width = 10;

      //设置button按钮的点击事件
      btn.addEventListener("click", function () {
        //添加一个定时器
        var timer = setInterval(function () {
          //如果进度到了100%就关闭定时器
          if (width >= 100) {
            clearInterval(timer);
          } else {
            width++; //每一次宽度（进度百分比）加一
            banner.style.width = width + "%";
            banner.innerHTML = width + "%";
            banner.style.transition = "0.5s"; //给进度条加点执行时间，尽量减少进度条增加的卡顿效果
          }
        }, 100); //每100毫秒（0.1s）触发执行一次
      });
    </script>
  </body>
</html>
